<template>
	<view class="container">
		<view>
			<form class="search-form">
				<view class="form-item">
					<uni-icons type="search" size="18" class="icon"></uni-icons>
					<input placeholder="搜索姓名 /编号 /手机" class="input"/>
				</view>
			</form>
		</view>
		<view class="select_icon">
			<ul class="select_ul">
				<li class="select_li">
					<navigator class="select_a">
						<image src="/static/img/A1.png" alt=""  class="select_img"/>
						<p class="select_p">客户列表</p>
					</navigator>
				</li>
				<li class="select_li">
					<navigator  class="select_a">
						<image src="/static/img/A2.png" alt="" class="select_img" />
						<p class="select_p">新增客户</p>
					</navigator>
				</li>
				<li class="select_li">
					<navigator  class="select_a">
						<image src="/static/img/A3.png" alt=""  class="select_img"/>
						<p class="select_p">数据中心</p>
					</navigator>
				</li>
				<li li class="select_li">
					<navigator  class="select_a">
						<image src="/static/img/A4.png" alt=""  class="select_img" />
						<p class="select_p">录入车牌</p>
					</navigator>
				</li>
			</ul>
		</view>
		<view class="">
			<view class="data_headline">
				<image src="/static/img/A5.png"></image>
				<text>数据统计</text>
			</view>
			<uni-section >
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>
				<view class="content" >
					<view v-if="current === 0" class="content_select">
						<ul>
							<li>
								<p>订单客户/个</p>
								<p>5</p>
							</li>
							<li>
								<p>到店客户/个</p>
								<p>2</p>
							</li>
							<li>
								<p>合并产值/元</p>
								<p>150000</p>
							</li>
				
						</ul>
					</view>
					<view v-if="current === 1" class="content_select">
						<ul>
							<li>
								<p>订单客户/个</p>
								<p>7</p>
							</li>
							<li>
								<p>到店客户/个</p>
								<p>5</p>
							</li>
							<li>
								<p>合并产值/元</p>
								<p>70000</p>
							</li>
										
						</ul>
					</view>
					<view v-if="current === 2" class="content_select">
						<ul>
							<li>
								<p>订单客户/个</p>
								<p>10</p>
							</li>
							<li>
								<p>到店客户/个</p>
								<p>20</p>
							</li>
							<li>
								<p>合并产值/元</p>
								<p>1500000</p>
							</li>			
						</ul>
					</view>
				</view>
			</uni-section>
		</view>
		<view class="task_container">
			<view class="data_headline">
				<image src="/static/img/A6.png"></image>
				<text>任务列表</text>
			</view>
			<uni-section >
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current1" :values="items1" :style-type="styleType1"
						:active-color="activeColor1" @clickItem="onClickItem1" />
				</view>
				<view class="content" >
					<view v-if="current1 === 0" class="content_select">
						<uni-card :is-shadow="false" is-full class="list">
							<view class="list_left">
								<view class="list_left_title">
								<text class="list_left_title1">小李</text>
								<text class="list_left_title2">西钓鱼台</text>
								<text class="list_left_title3">·御玺15-A_15</text>
								</view>
								<view class="list_number">
									<view class="list_number1">客户编号</view>
									<view class="list_number2">2019-7-15</view>
								</view>
							</view>
							<view class="list_right">
								<view class="list_client">待跟踪客户</view>
								<view>
									<button id="list_button" type="primary">去处理</button>
								</view>
							</view>
						</uni-card>
						<uni-card :is-shadow="false" is-full class="list">
							<view class="list_left">
								<view class="list_left_title">
								<text class="list_left_title1">小李</text>
								<text class="list_left_title2">西钓鱼台</text>
								<text class="list_left_title3">·御玺15-A_15</text>
								</view>
								<view class="list_number">
									<view class="list_number1">客户编号</view>
									<view class="list_number2">2019-7-15</view>
								</view>
							</view>
							<view class="list_right">
								<view class="list_client">待跟踪客户</view>
								<view>
									<button id="list_button" type="primary">去处理</button>
								</view>
							</view>
						</uni-card>
						<uni-card :is-shadow="false" is-full class="list">
							<view class="list_left">
								<view class="list_left_title">
								<text class="list_left_title1">小李</text>
								<text class="list_left_title2">西钓鱼台</text>
								<text class="list_left_title3">·御玺15-A_15</text>
								</view>
								<view class="list_number">
									<view class="list_number1">客户编号</view>
									<view class="list_number2">2019-7-15</view>
								</view>
							</view>
							<view class="list_right">
								<view class="list_client">待跟踪客户</view>
								<view>
									<button id="list_button" type="primary">去处理</button>
								</view>
							</view>
						</uni-card>
						<uni-card :is-shadow="false" is-full class="list">
							<view class="list_left">
								<view class="list_left_title">
								<text class="list_left_title1">小李</text>
								<text class="list_left_title2">西钓鱼台</text>
								<text class="list_left_title3">·御玺15-A_15</text>
								</view>
								<view class="list_number">
									<view class="list_number1">客户编号</view>
									<view class="list_number2">2019-7-15</view>
								</view>
							</view>
							<view class="list_right">
								<view class="list_client">待跟踪客户</view>
								<view>
									<button id="list_button" type="primary">去处理</button>
								</view>
							</view>
						</uni-card>
					</view>
					<view v-if="current1 === 1" class="content_select">
						<uni-card :is-shadow="false" is-full class="list">
							<view class="list_left">
								<view class="list_left_title">
								<text class="list_left_title1">小李</text>
								<text class="list_left_title2">西钓鱼台</text>
								<text class="list_left_title3">·御玺15-A_15</text>
								</view>
								<view class="list_number">
									<view class="list_number1">客户编号</view>
									<view class="list_number2">2019-7-15</view>
								</view>
							</view>
							<view class="list_right">
								<view class="list_client">待跟踪客户</view>
								<view>
									<button id="list_button" type="primary">去处理</button>
								</view>
							</view>
						</uni-card>
						<uni-card :is-shadow="false" is-full class="list">
							<view class="list_left">
								<view class="list_left_title">
								<text class="list_left_title1">小李</text>
								<text class="list_left_title2">西钓鱼台</text>
								<text class="list_left_title3">·御玺15-A_15</text>
								</view>
								<view class="list_number">
									<view class="list_number1">客户编号</view>
									<view class="list_number2">2019-7-15</view>
								</view>
							</view>
							<view class="list_right">
								<view class="list_client">待跟踪客户</view>
								<view>
									<button id="list_button" type="primary">去处理</button>
								</view>
							</view>
						</uni-card>
						<uni-card :is-shadow="false" is-full class="list">
							<view class="list_left">
								<view class="list_left_title">
								<text class="list_left_title1">小李</text>
								<text class="list_left_title2">西钓鱼台</text>
								<text class="list_left_title3">·御玺15-A_15</text>
								</view>
								<view class="list_number">
									<view class="list_number1">客户编号</view>
									<view class="list_number2">2019-7-15</view>
								</view>
							</view>
							<view class="list_right">
								<view class="list_client">待跟踪客户</view>
								<view>
									<button id="list_button" type="primary">去处理</button>
								</view>
							</view>
						</uni-card>
						<uni-card :is-shadow="false" is-full class="list">
							<view class="list_left">
								<view class="list_left_title">
								<text class="list_left_title1">小李</text>
								<text class="list_left_title2">西钓鱼台</text>
								<text class="list_left_title3">·御玺15-A_15</text>
								</view>
								<view class="list_number">
									<view class="list_number1">客户编号</view>
									<view class="list_number2">2019-7-15</view>
								</view>
							</view>
							<view class="list_right">
								<view class="list_client">待跟踪客户</view>
								<view>
									<button id="list_button" type="primary">去处理</button>
								</view>
							</view>
						</uni-card>
					</view>
				</view>
			</uni-section>
		</view>
		<view class="">
			<view class="data_headline">
				<image src="/static/img/A7.png"></image>
				<text>排行榜</text>
			</view>
			<uni-section >
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current2" :values="items2" :style-type="styleType2"
						:active-color="activeColor2" @clickItem="onClickItem2" />
				</view>
				<view class="ranking" >
					<view v-if="current2 === 0" class="ranking_select">
						<view class="ranking_select_logo">
							<view class="ranking_select_text1">小李</view>
							<view class="ranking_select_text2">小张</view>
							<view class="ranking_select_text3">小王</view>
							<view><image src="/static/img/A8.png"></image></view>
						</view>
						<view class="ranking_table_container" >
							<uni-table border stripe>
								<uni-tr  >
									<uni-th align="center" width="40" >排名</uni-th>
									<uni-th align="center" width="50" >设计师</uni-th>
									<uni-th align="center" width="40" >订单</uni-th>
									<uni-th align="center"width="50" >合并产值</uni-th>
								</uni-tr>
								<uni-tr>
									<uni-td align="center" >1</uni-td>
									<uni-td align="center" >小刘</uni-td>
									<uni-td align="center" >2</uni-td>
									<uni-td align="center" >20000</uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td align="center" >2</uni-td>
									<uni-td align="center" >小刘</uni-td>
									<uni-td align="center" >2</uni-td>
									<uni-td align="center" >20000</uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td align="center" >3</uni-td>
									<uni-td align="center" >小刘</uni-td>
									<uni-td align="center" >2</uni-td>
									<uni-td align="center" >20000</uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td align="center" >4</uni-td>
									<uni-td align="center" >小刘</uni-td>
									<uni-td align="center" >2</uni-td>
									<uni-td align="center" >20000</uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td align="center" >5</uni-td>
									<uni-td align="center" >小刘</uni-td>
									<uni-td align="center" >2</uni-td>
									<uni-td align="center" >20000</uni-td>
								</uni-tr>
							</uni-table>
						</view>
					</view>
					<view v-if="current2 === 1" class="ranking_select">
						<view class="ranking_select_logo">
							<view class="ranking_select_text1">小李</view>
							<view class="ranking_select_text2">小张</view>
							<view class="ranking_select_text3">小王</view>
							<view><image src="/static/img/A8.png"></image></view>
							</view>
							<view class="ranking_table_container" >
								<uni-table border stripe>
									<uni-tr  >
										<uni-th align="center" width="40" >排名</uni-th>
										<uni-th align="center" width="50" >设计师</uni-th>
										<uni-th align="center" width="40" >订单</uni-th>
										<uni-th align="center"width="50" >合并产值</uni-th>
									</uni-tr>
									<uni-tr>
										<uni-td align="center" >1</uni-td>
										<uni-td align="center" >小张</uni-td>
										<uni-td align="center" >2</uni-td>
										<uni-td align="center" >20000</uni-td>
									</uni-tr>
								</uni-table>
							</view>
						</view>
					<view v-if="current2 === 2" class="ranking_select">
						<view class="ranking_select_logo">
							<view class="ranking_select_text1">小李</view>
							<view class="ranking_select_text2">小刘</view>
							<view class="ranking_select_text3">小王</view>
							<view><image src="/static/img/A8.png"></image></view>
							</view>
							<view class="ranking_table_container" >
								<uni-table border stripe>
									<uni-tr >
										<uni-th align="center" width="40" >排名</uni-th>
										<uni-th align="center" width="50" >设计师</uni-th>
										<uni-th align="center" width="40" >订单</uni-th>
										<uni-th align="center"width="50" >合并产值</uni-th>
									</uni-tr>
									<uni-tr>
										<uni-td align="center" >1</uni-td>
										<uni-td align="center" >小刘</uni-td>
										<uni-td align="center" >2</uni-td>
										<uni-td align="center" >20000</uni-td>
									</uni-tr>
									<uni-tr>
										<uni-td align="center" >2</uni-td>
										<uni-td align="center" >小刘</uni-td>
										<uni-td align="center" >2</uni-td>
										<uni-td align="center" >20000</uni-td>
									</uni-tr>
									<uni-tr>
										<uni-td align="center" >3</uni-td>
										<uni-td align="center" >小刘</uni-td>
										<uni-td align="center" >2</uni-td>
										<uni-td align="center" >20000</uni-td>
									</uni-tr>
									<uni-tr>
										<uni-td align="center" >4</uni-td>
										<uni-td align="center" >小刘</uni-td>
										<uni-td align="center" >2</uni-td>
										<uni-td align="center" >20000</uni-td>
									</uni-tr>
									<uni-tr>
										<uni-td align="center" >5</uni-td>
										<uni-td align="center" >小刘</uni-td>
										<uni-td align="center" >2</uni-td>
										<uni-td align="center" >20000</uni-td>
									</uni-tr>
								</uni-table>
							</view>
					</view>
					<view v-if="current2 === 3" class="ranking_select">
						<view class="ranking_select_logo">
							<view class="ranking_select_text1">小李</view>
							<view class="ranking_select_text2">小关</view>
							<view class="ranking_select_text3">小王</view>
<view><image src="/static/img/A8.png"></image></view>
						</view>
						<view class="ranking_table_container" >
							<uni-table border stripe>
								<uni-tr  >
									<uni-th align="center" width="40" >排名</uni-th>
									<uni-th align="center" width="50" >设计师</uni-th>
									<uni-th align="center" width="40" >订单</uni-th>
									<uni-th align="center"width="50" >合并产值</uni-th>
								</uni-tr>
								<uni-tr>
									<uni-td align="center" >1</uni-td>
									<uni-td align="center" >小孙</uni-td>
									<uni-td align="center" >2</uni-td>
									<uni-td align="center" >20000</uni-td>
								</uni-tr>
							</uni-table>
						</view>
					</view>
					
				</view>
			</uni-section>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	
	const items = ref(['今日', '本周', '本月'])
	const styles = ref([{
	  value: 'text',
	  text: '文字'
	}])
	const current = ref(0)
	const activeColor = ref('#007aff')
	const styleType = ref('text')
	
	const onClickItem = (e) => {
	  if (current.value !== e.currentIndex) {
	    current.value = e.currentIndex
	  }
	}
	
	const items1 = ref(['待处理', '已处理'])
	const styles1 = ref([{
	  value: 'text',
	  text: '文字'
	}])
	const current1 = ref(0)
	const activeColor1 = ref('#007aff')
	const styleType1= ref('text')
	
	const onClickItem1= (e) => {
	  if (current1.value !== e.currentIndex) {
	    current1.value = e.currentIndex
	  }
	}
	const items2 = ref(['设计师榜','客户经理榜','业务中心榜','设计中心榜'])
	const styles2 = ref([{
	  value: 'text',
	  text: '文字'
	}])
	const current2 = ref(0)
	const activeColor2 = ref('#007aff')
	const styleType2= ref('text')
	
	const onClickItem2= (e) => {
	  if (current2.value !== e.currentIndex) {
	    current2.value = e.currentIndex
	  }
	}
</script>

<style >
	page{
		background-color: #fff;
		overflow: hidden; 
		margin: 0;
	}
	ul{
		justify-content: space-around;
		list-style: none;
		display: flex;
		padding: 0;
	}
	li{
		text-align: center;
	}
	 .form-item{
	 	position: relative;
		margin:30rpx 30rpx 40rpx 30rpx;
	 }
	 .form-item > .icon{
	 	position: absolute;
	 	top: 16rpx;
	 	left: 16rpx;
	 }
	 .form-item > .input{
	 	box-sizing: border-box;
	 	width: 100%;
	 	height: 70rpx;
	 	padding-left: 70rpx;
	 	padding-right: 20rpx;
	 	border: 1px solid #e4e4e4;
	 	border-radius: 12rpx;
	 	font-size: 24rpx;
	 	background-color: #fff;
	 }   

	
	.select_img{
		width: 52rpx;
		height: 52rpx;
	}
	.select_p{
		font-family: MicrosoftYaHei, 微软雅黑;
		font-weight: 400;
		font-style: normal;
		font-size: 10px;
		color: rgb(89, 89, 89);
	}
	
	.data_headline{
		position: relative;
		margin: 60rpx auto;
	}
	.data_headline>image{
		    border-width: 0px;
		    position: absolute;
		    left: 0px;
		    top: 0px;
		    width: 14px;
		    height: 14px;
			left: 32rpx;
	}
	.data_headline>text{
		font-family: 'MicrosoftYaHei', '微软雅黑';
		font-weight: 400;
		position: absolute;
		font-style: normal;
		font-size: 12px;
		color: #2191F7;
		left: 80rpx;
	}
	.content_select{
		margin: 40rpx 0 80rpx 0;
	}
	.list{
	position: relative;
	height: 180rpx;
}
	.list .list_left{
	position: absolute;
	left: 0;
	}
	.list .list_right{
	position: absolute;
	right:0
	}
	
	.list_right{
		display: flex;
		flex-direction:column;
		justify-content: space-between;
		margin-right: 20rpx;
		margin-top: 15rpx;
	}
	#list_button{
		    border-width: 0px;
		    width: 140rpx;
		    height: 60rpx;
		    font-family: 'MicrosoftYaHei', '微软雅黑';
		    font-weight: 400;
		    font-style: normal;
		    font-size: 10px;
		    color: #FFFFFF;
			text-align: center;
			line-height: 30px;
			margin-top: 20rpx;
	}
	.list_client{
		color: red;
	}
	.list_left{
		margin-left: 40rpx ;
		margin-top: 15rpx;
	}
	.list_left_title{
		    font-family: 'MicrosoftYaHei', '微软雅黑';
		    font-weight: 400;
		    font-style: normal;
			color: #000000
	}
	.list_left_title .list_left_title1{
		margin-right: 40rpx;
	}
	.list_left_title .list_left_title3{
		color: #666666;
	}
	.list_left .list_number{
		font-family: 'MicrosoftYaHei', '微软雅黑';
		font-weight: 400;
		font-style: normal;
		font-size: 10px;
		color: #AEAEAE;
}
	.list_left .list_number .list_number1,.list_number2{
		height: 30rpx;
	}
	
	.ranking_select{
		
		
	}
	.ranking .ranking_select .ranking_select_logo{
		display: flex;
		position: relative;
		justify-content: space-around;
		margin: 50rpx 0;
	}
	.ranking .ranking_select .ranking_select_logo image{
		width: 285px;
		height: 107px;
	}
	.ranking .ranking_select .ranking_select_logo>.ranking_select_text1{
		position: absolute;
		z-index: 6;
		top: 41px;
		left: 76px;
		font-family: 'PingFangSC-Regular', 'PingFang SC';
		font-weight: 400;
		font-style: normal;
		font-size: 10px;
	}
	.ranking .ranking_select .ranking_select_logo>.ranking_select_text2{
		position: absolute;
		z-index: 6;
		top: 21px;
		left: 178px;
		font-family: 'PingFangSC-Regular', 'PingFang SC';
		font-weight: 400;
		font-style: normal;
		font-size: 10px;
	}
	.ranking .ranking_select .ranking_select_logo>.ranking_select_text3{
		position: absolute;
		z-index: 6;
		top: 45px;
		left: 277px;
		font-family: 'PingFangSC-Regular', 'PingFang SC';
		font-weight: 400;
		font-style: normal;
		font-size: 10px;
	}

	
	
</style>
